<div>
    <div id="tb<?php echo $uniqid;?>" style="padding:5px" class="datagrid-toolbar">
        <table cellspacing="0" cellpadding="0">
            <tbody>
            <tr>
                <td><span class="l-btn l-btn-small l-btn-plain" :class="params.mode=='included'?'selected':''"
                          @click="filter('included')"><span class="l-btn-text">已计入</span></span>
                    <span class="l-btn l-btn-small l-btn-plain" :class="params.mode=='returned'?'selected':''"
                          @click="filter('returned')"><span class="l-btn-text">已退回</span></span></td>
                <td><a href="javascript:void(0);" onclick="teamconsumev1Reload();"
                       class="l-btn l-btn-small l-btn-plain"><span
                        class="l-btn-left l-btn-icon-left"><i class="iconfont icon-shuaxin"></i><span
                        class="l-btn-text">重载</span></span></a></td>
                <td><span style="line-height:30px;">日期</span>
                    <input id="teamconsumev1StartOn" style="width:110px" type="text"
                           class="easyui-datebox"> </input>至
                    <input id="teamconsumev1EndOn" style="width:110px" type="text"
                           class="easyui-datebox"> </input>
                </td>
                <td><select id="teamconsumev1KeywordsType" class="forminput inputstyle textbox-text validatebox-text"
                            style="width:80px">
                    <option value="order_id">订单ID</option>
                    <option value="order_sn">订单编号</option>
                    <option value="consignee">收货人</option>
                    <option value="consignee_phone">收货人手机号</option>
                </select></td>
                <td>&nbsp;&nbsp;<input id="teamconsumev1Keywords" style="width:120px" type="text"
                                      class="easyui-input textbox"></td>
                <td><a href="javascript:void(0);" onclick="teamconsumev1Search();"
                       class="l-btn l-btn-small l-btn-plain"><span
                        class="l-btn-left l-btn-icon-left"><i class="iconfont icon-sousuo"></i><span class="l-btn-text">查询</span></span></a>
                    <a href="javascript:void(0);" onclick="teamconsumeV1listExport()" class="l-btn l-btn-small l-btn-plain"><span
                            class="l-btn-left l-btn-icon-left"><i class="iconfont icon-xiazai"></i><span
                            class="l-btn-text">导出直推业绩明细</span></span></a>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
    <div class="con" style="-moz-user-select:none;">
        <table id="teamconsumev1"></table>
    </div>
    <div id="teamconsumev1Dlg" class="easyui-dialog" style="width:720px; height:520px;" title="信息框" closed="true"></div>
</div>
<script>
    var teamconsumev1Vm = new Vue({
        el: '#tb<?php echo $uniqid;?>',
        data: {
            params: {
                mode: 'included'
            }
        },
        methods: {
            filter(mode) {
                this.params.mode = mode;
                teamconsumev1Search();
            },
        }
    });
    var teamconsumeV1listExport = function () {
        showLoading('.con');
        $.post('/admin/member/exportTeamConsumeV1', {
            id: '<?php echo $id;?>',
            mode: teamconsumev1Vm.params.mode,
            keywordsType: $('#teamconsumev1KeywordsType').val(),
            keywords: $('#teamconsumev1Keywords').val(),
            start_on: $('#tb<?php echo $uniqid;?> #teamconsumev1StartOn').val(),
            end_on: $('#tb<?php echo $uniqid;?> #teamconsumev1EndOn').val(),
        }, function (data) {
            hideLoading();
            if (parseInt(data.ret) === 0) {
                $.messager.show({
                    title: '提示',
                    msg: data.msg,
                    timeout: 3000,
                    showType: 'slide'
                });
                eventmaterialDownload(data.data);
            } else {
                $.messager.alert('提示', data.msg, 'warning');
            }
        }, 'json').fail((response)=> {
            hideLoading();
            $.messager.alert('提示', response.responseText, 'warning');
        });
    };
    var teamconsumev1Reload = function () {
        $("#teamconsumev1").datagrid('reload');
    };
    var teamconsumev1Search = function () {
        var height = 546 - $(".top").height() - 46;
        var width = $(window).width() - $(".leftmenu").width() - 8;
        $("#teamconsumev1").datagrid({
            width: width,
            height: height,//高度
            singleSelect: true,//如果为true，则只允许选择一行
            striped: true,//是否显示斑马线效果。
            rownumbers: true,//如果为true，则显示一个行号列。
            pagination: true,//是否显示分页
            pageSize: 10,
            pageList: [10, 15, 20, 25],
            method: 'post',
            sortName: 'id',
            sortOrder: 'desc',
            idField: 'id',
            treeField: 'title',
            showFooter: true,
            url: '/admin/member/teamconsumev1',
            queryParams: {
                id: '<?php echo $id;?>',
                mode: teamconsumev1Vm.params.mode,
                keywordsType: $('#teamconsumev1KeywordsType').val(),
                keywords: $('#teamconsumev1Keywords').val(),
                start_on: $('#tb<?php echo $uniqid;?> #teamconsumev1StartOn').val(),
                end_on: $('#tb<?php echo $uniqid;?> #teamconsumev1EndOn').val(),
            },
            fitColumns: true,//真正的自动展开/收缩列的大小，以适应网格的宽度，防止水平滚动。
            nowrap: true,//如果为true，则在同一行中显示数据。设置为true可以提高加载性能。 是否换行
            selectOnCheck: false,
            checkOnSelect: true,
            toolbar: '#tb<?php echo $uniqid;?>',
            columns: [[
                {field: 'item_id', title: '订单货品ID', width: fixWidth(5)},
                {field:'order_sn',title:'订单编号',width:fixWidth(15)},
                {
                    field: 'member',
                    title: '下单用户',
                    width: fixWidth(15),
                    formatter: function (value, rowData, rowIndex) {
                        return value ? '<div  style="line-height: 20px">ID:' + rowData.member.id + '<br>' +
                            '昵称：' + (rowData.member.realname ? rowData.member.realname : rowData.member.nickname) + '<br>' +
                            '电话：' + (rowData.member.phone ? rowData.member.phone : '') + '</div>' : '';
                    }
                },
                {field:'consignee',title:'收货人',width:fixWidth(10),formatter: function (value, rowData, rowIndex) {
                        return '<div  style="line-height: 20px">' + (rowData.consignee??'') + '<br>' +
                            (rowData.phone??'') + '</div>';
                    }},
                {field:'address',title:'收货地址',width:fixWidth(10),formatter: function (value, rowData, rowIndex) {
                        return '<div  style="line-height: 20px">' + (rowData.province_name??'') + (rowData.city_name??'') + (rowData.area_name??'') + '<br>' +
                            (rowData.address??'') + '</div>';
                    }},
                {field:'status_name',title:'订单状态',width:fixWidth(10)},
                {field:'pay_price',title:'支付金额',width:fixWidth(10)},
                {field:'pay_type_text',title:'支付方式',width:fixWidth(10)},
                {field:'paytime',title:'支付时间',width:fixWidth(15), formatter(value, rowData){
                        return value ? moment(value * 1000).format("Y-MM-DD HH:mm:ss") : '';
                    }},
                {field:'memo',title:'商户备注',width:fixWidth(10)},
                {field:'remark',title:'用户备注',width:fixWidth(10)},
                {field:'created_at',title:'时间',width:fixWidth(15)},
            ]]
        });
    };
    teamconsumev1Search();
</script>

<style>
    .datagrid-toolbar .selected {
        color: #f1f1f1;
        background: #1065a7;
        border: 1px solid #f0f0f0;
    }
</style>